<div data-role="page" data-theme="a" id="saldo" class="pageBradesco">
	<div id="header" data-role="header" data-position="fixed">				
		<h1 class="headerBradesco">Bradesco</h1>
    	<a href="#" data-icon="delete" id="logoutBtn" onclick="logout();" data-theme="d">logout</a>
		<span id="sessionTime">Sessão expira em:<br /><span></span></span>
	</div>



	<div data-role="content" data-theme="a">
		<h3>Saldos:</h3>
		<hr />
		<div id="sCont">
			<ul data-role="listview" data-inset="true">
			    <li data-role="list-divider">Disponível</li>
			    <li>
			        <table id="tabelaSaldos">
			        	<thead>
			        		<tr>
			        			<th class="t-q"></th>
			        			<th class="u-q"></th>
		        			</tr>
			        	</thead>
			        	<tbody>
				        	<tr>
				        		<td>+ Conta Fácil (C/C + Poup)</td>
				        		<td id="contaFacil"></td>
			        		</tr>
				        	<tr>
				        		<td>= Total</td>
				        		<td id="contaFacilTotal"></td>
			        		</tr>
				        	<tr>
				        		<td>Saldo Total</td>
				        		<td id="saldoTotal"></td>
			        		</tr>
				        	<tr>
				        		<td>Saldo Disponível p/ Investimento</td>
				        		<td id="saldoInvestimento"></td>
			        		</tr>
			        	</tbody>
			        </table>
			    </li>
			    <li data-role="list-divider">Limite de crédito</li>
			    <li>
			        <table id="tabelaLimites">
			        	<thead>
			        		<tr>
			        			<th class="t-q"></th>
			        			<th class="u-q"></th>
		        			</tr>
			        	</thead>
			        	<tbody>
				        	<tr>
				        		<td>Crédito Online</td>
				        		<td id="creditoOnline"></td>
			        		</tr>
				        	<tr>
				        		<td>Limite Utilizado</td>
				        		<td id="limiteUtilizado"></td>
			        		</tr>
				        	<tr>
				        		<td>Limite a Utilizar</td>
				        		<td id="limiteDisponivel"></td>
			        		</tr>
			        	</tbody>
			        </table>
			    </li>
			</ul>


			<h3>Extratos:</h3>
			<hr />
			<fieldset id="ctrlGPeriodo" data-role="controlgroup" data-type="horizontal class="ui-shadow"">
			    <legend>Exibir por:</legend>
			    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" data-theme="d">
			    <label for="radio-choice-h-2a">Período</label>
			    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off" data-theme="d">
			    <label for="radio-choice-h-2b">Mês</label>
			    <br />
			    <div id="pPeriodo">
			    	<div class="ui-grid-a" style="float: left">
			    		<div class="ui-block-a">
			    			<input id="dataIni" name="dataIni" placeholder="de:" value="" />
			    		</div>
		    			<div class="ui-block-b">
			    			<input id="dataFim" name="dataFim" placeholder="até:" value="" />
			    		</div>
			    	</div>
		    	</div>		
			    <div id="pMes">
			    	<div data-role="fieldcontain">
			    	    <select name="select-native-fc" id="select-native-fc">
				    	    <option value="0">Selecione o Mês</option>
				    	    <option value="01">Janeiro</option>
				    	    <option value="02">Fevereiro</option>
				    	    <option value="03">Março</option>
				    	    <option value="04">Abril</option>
				    	    <option value="05">Maio</option>
				    	    <option value="06">Junho</option>
				    	    <option value="07">Julho</option>
				    	    <option value="08">Agosto</option>
				    	    <option value="09">Setembro</option>
				    	    <option value="10">Outubro</option>
				    	    <option value="11">Novembro</option>
				    	    <option value="12">Dezembro</option>
			    		</select>
		    		</div>
	    		</div>
	    		<br />
	    		<br />
	    		<input type="submit" value="Consultar Extrato" id="consultar" name="consultar" data-theme="d" />
			</fieldset>
			<div id="extratoResult">
				<ul data-role="listview" data-inset="true">
				    <li data-role="list-divider">Movimentação de: <span id="pdMov"></span></li>
				    <li>
				        <table id="extratoList">
				        	<thead>
				        		<tr>
				        			<th class="u-q">Data</th>
				        			<th class="d-q">Transação</th>
				        			<th class="u-q">Valor</th>
			        			</tr>
				        	</thead>
				        	<tbody>
					        	<tr>
					        		<td>1.000,00</td>
					        		<td>Crédito Online</td>
					        		<td>1.000,00</td>
				        		</tr>
					        	<tr>
					        		<td>0,00</td>
					        		<td>Limite Utilizado</td>
					        		<td>0,00</td>
				        		</tr>
					        	<tr>
					        		<td>1.000,00</td>
					        		<td>Limite a Utilizar</td>
					        		<td>1.000,00</td>
				        		</tr>
				        	</tbody>
				        </table>
				    </li>
				</ul>
			</div>
		</div>
	</div>
		



	<div data-role="footer" id="footer" data-id="footer" data-position="fixed" class="nav-bradesco ui-footer ui-bar-d">
		<div data-role="navbar" class="nav-bradesco ui-navbar ui-mini" data-theme="d" role="navigation">
			<ul>
				<li><a id="menu" onclick="$.mobile.changePage('menu.html')" data-icon="custom">Menu</a></li>
				<li><a id="subscribe" data-icon="custom">Subscribe</a></li>
				<li><a id="mapa" onclick="$.mobile.changePage('mapa.html')" data-icon="custom">Mapa</a></li>
				<li><a id="token" onclick="generateToken();" data-icon="custom">Token</a></li>
			</ul>
		</div>
	</div>
</div>